<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="范珍">
    <title>vue进阶--10 路由</title>
    <script src='vue.js'></script>
    <!--
            vue-router：基于vue的路由脚本库；
            router:路由;
            路由：url与视图的一一对应关系;通过url的变化实现
            视图的切换;非常适合用来进行单页应用的开发;

            单页应用：整个项目只有一个html文件;

            原生app：采用移动端开发技术(android\oc)开发的app,
                    需要下载安装包安装使用;
            
            webapp: 采用web前端技术开发的网站,实现效果模仿原生app,
                    不需下载安装,借助浏览器访问;
            混合app：采用web前端技术开发页面,配合原生开发技术,
                    最后打包形成安装包
                    需要下载安装使用;
            微信小程序、微信公众号开发
        -->
    <script src="vue-router.js"></script>
    <style>
        .router-link-active {
            color: red;
        }
    </style>
</head>

<body>
    <div id='app'>
        <h1>这是通过路由实现视图切换的一个例子</h1>
        <p>
            <!--
                    router-link:vue-router中一个组件,
                    路由链接,会被解析成a标签
                    to:指明路由path

                    选中的router-link,默认会添加router-link-active样式类
                    可以通过这个样式类修改选中的样式
                -->
            <router-link to="/foo">go to Foo</router-link>
            <router-link to="/bar">go to bar</router-link>
        </p>
        <!--
                路由匹配的视图的渲染位置
            -->
        <router-view></router-view>
    </div>
    <script>
        // 定义组件
        // const:常量;一经赋值,后面无法修改;
        const Foo = {
            template: '<div>这是Foo组件</div>'
        }
        const Bar = {
            template: '<div>这是Bar组件</div>'
        }

        //创建一个路由对象
        const router = new VueRouter({
            //定义路由的匹配规则数组
            routes: [
                { path: '/foo', component: Foo },
                { path: '/bar', component: Bar },
                { path: '', component: Foo }
            ]
        })

        new Vue({
            el: '#app',
            router
        })



        
        var name = "lucy";
        var age = 20;
        // var stu = {
        //     name:name,
        //     age:age
        // }
        // 当key与value名称一致时可以简写如下
        var stu = {
            name,
            age
        }
        console.log(stu);
    </script>
</body>

</html>